import React,{Component} from 'react'
import { ServerIP } from '@utils/request'
import style from './style.less';
import { connect } from 'react-redux';
import * as actions from '../store/action';
import { withRouter } from 'react-router-dom';
import { Button, Form, Input, Space, InputNumber, Upload, message,Select } from 'antd';
class MenuModal extends Component{
    constructor(props) {
        super(props);
        this.state = {
            CourseVisible: false,
            bookNumber: undefined,
            photopath: '',

        }
    }
    uploadFile = ({ file, fileList }) => {
        if (file.status === 'done') {
            if (file.response !== undefined) {

                if (file.response.response.res) {
                    message.success('图片上传成功', 1);
                    let upData = file.response.response;
                    this.setState({
                        photopath: file.response.response.message
                    })
                } else {
                    message.error(file.response.exception, 1);
                }
            }
        } else if (file.status === 'uploading') {

        } else {
            message.error('图片上传失败, 请重新上传', 1);
            return;
        }
    }
    //添加
    onFinish = (value) => {
        let obj = {
            dishDetails: value.dishDetails,
            dshclassification: value.dshclassification,
            menuName: value.menuName,
            price: value.price,
            photoPath: this.state.photopath
        }
        this.props.addMenuRequest(obj)
        this.props.closeModal()
    }
    //编辑
    onEdit = (value) => {
        let obj = {
            dishDetails: value.dishDetails,
            dshclassification: value.dshclassification,
            menuName: value.menuName,
            price: value.price,
            photoPath: this.state.photopath
        }
        this.props.addMenuRequest(obj)
        this.props.closeModal()
    }
    render(){
        const {actionType}=this.props;
        const {photopath}=this.state;
        const uploadButton = (
            <div>
                <div className="ant-upload-text">Upload</div>
            </div>
        )
        const uploadFileGrades = {
            name: "file",
            action: "/api/server/web/rest/FileUploadAndDownload/uploadFile",
            accept: 'image/*',
            onChange: this.uploadFile,
        }
        const dshclassificationList=[
            {
                connect:"素菜",
                value:true
            },
            {
                connect: "荤菜",
                value: false
            }
        ]
        return(
            <>
                {
                    actionType===1?(
                        <Form
                            layout="vertical"
                            onFinish={this.onFinish}
                        >
                            <Form.Item
                                label="菜品名称"
                                name={['menuName']}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输菜品名称'
                                    }
                                ]}
                            >
                                <Input placeholder='请输入商品名称' onChange={(value) => { this.setState({ menuName: value }) }} />
                            </Form.Item>
                            <Form.Item
                                label="菜品简介"
                                name={['dishDetails']}
                                rules={[{ required: true, message: '请填写菜品简介' }]}
                            >
                                <Input.TextArea placeholder="菜品简介" onChange={(value) => { this.setState({ dishDetails: value }) }} />
                            </Form.Item>
                            <div className={style.div_form}>
                                <Form.Item
                                    label="菜品类别"
                                    name={['dshclassification']}
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入菜品类别'
                                        }
                                    ]}
                                >
                                    <Select
                                        placeholder="菜品分类"
                                        style={{ width: "180px" }}
                                    >
                                        {

                                            dshclassificationList.map((item,index) => {
                                                return <Select.Option value={item.value} key={index}>{item.connect}</Select.Option>
                                            })
                                        }
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    label="菜品单价"
                                    name={['price']}
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入菜品单价'
                                        }
                                    ]}
                                >
                                    <InputNumber placeholder='请输入菜品单价' onChange={(value) => { this.setState({ price: value }) }} style={{ width: "10vw" }} />
                                </Form.Item>
                            </div>
                            <Form.Item
                                label="菜品图片"
                                name={['photoPath']}
                                rules={[{ required: false, message: '菜品图片' }]}
                            >
                                <Upload
                                    name="file"
                                    accept='image/*'
                                    listType="picture-card"
                                    className={style.avatar_uploader}
                                    showUploadList={false}
                                    {...uploadFileGrades}
                                >
                                    {photopath != '' ? <img src={ServerIP + photopath} style={{ width: '100%', height: '100%' }} /> : uploadButton}
                                </Upload>
                            </Form.Item>
                            <Form.Item >
                                <Space style={{ position: 'absolute', marginLeft: '70%', marginTop: "2vh" }}>
                                    <Button type='primary' ghost htmlType='submit'>提交</Button>
                                    <Button type='primary' ghost htmlType='button' onClick={() => { this.props.closeModal() }} danger>取消</Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    ):(
                        <Form
                            layout="vertical"
                            onFinish={this.onEdit}
                        >
                            <Form.Item
                                label="商品名称"
                                name={['bookName']}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输商品名称'
                                    }
                                ]}
                            >
                                <Input placeholder='请输入商品名称' onChange={(value) => { this.setState({ courseName: value }) }} />
                            </Form.Item>
                            <Form.Item
                                label="商品简介"
                                name={['bookInformation']}
                                rules={[{ required: true, message: '请填写商品简介' }]}
                            >
                                <Input.TextArea placeholder="商品简介" onChange={(value) => { this.setState({ courseInformation: value }) }} />
                            </Form.Item>
                            <div className={style.div_form}>
                                <Form.Item
                                    label="商品数量"
                                    name={['bookNumber']}
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入商品数量'
                                        }
                                    ]}
                                >
                                    <InputNumber placeholder='请输入商品数量' onChange={(value) => { this.setState({ bookNumber: value }) }} style={{ width: "10vw" }} />
                                </Form.Item>
                                <Form.Item
                                    label="商品单价"
                                    name={['unitPrice']}
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入商品单价'
                                        }
                                    ]}
                                >
                                    <InputNumber placeholder='请输入商品单价' onChange={(value) => { this.setState({ numbers: value }) }} style={{ width: "10vw" }} />
                                </Form.Item>
                            </div>
                            <Form.Item
                                label="商品图片"
                                name={['photoPath']}
                                rules={[{ required: true, message: '商品图片' }]}
                            >
                                <Upload
                                    name="file"
                                    accept='image/*'
                                    listType="picture-card"
                                    className={style.avatar_uploader}
                                    showUploadList={false}
                                    {...uploadFileGrades}
                                >
                                    {photopath != '' ? <img src={ServerIP + photopath} style={{ width: '100%', height: '100%' }} /> : uploadButton}
                                </Upload>
                            </Form.Item>
                            <Form.Item >
                                <Space style={{ position: 'absolute', marginLeft: '70%', marginTop: "2vh" }}>
                                    <Button type='primary' ghost htmlType='submit'>提交</Button>
                                        <Button type='primary' ghost htmlType='button' onClick={() => { this.props.closeModal() }} danger>取消</Button>
                                </Space>
                            </Form.Item>
                        </Form>
                    )
                }
            </>
        );
    }

}

//异步输出
const mapDispatchToProps = dispatch => ({
    
    //添加商品
    addMenuRequest(value) {
        dispatch(actions.addMenuRequest(value))
    },
})
export default connect(null, mapDispatchToProps)(withRouter(MenuModal))
